<template>
	<div style="width: 100%;height: 100vh;display: flex;flex-direction: column;">
		<div class="notChange"  style="z-index: 100; width: 100%;height: 7vh;background-color: rgb(43, 47, 58);display: flex;align-items: center;">
			<img src="../pic/routerPage/school-name.png" style="height:90%;" />
		</div>
		<div style="width: 100%;display: flex;flex-direction: row;">
			<!-- 左边导航栏 -->
			<div  style="width: 10vw;height: 100%;background-color: rgb(45,58,75);position: fixed;top: 7%;left: 0rem;">
				<el-menu default-active="2" class="el-menu-vertical-demo"  background-color="rgb(45, 58, 75)"
				 text-color="#fff" active-text-color="rgba(64, 158, 255, 1)" router>
					<el-menu-item index="/homePage" >
						<i class="el-icon-document"></i>
						<span slot="title">首页</span>
					</el-menu-item>
					<el-menu-item index="/audiencePage">
						<i class="el-icon-setting"></i>
						<span slot="title">观众</span>
					</el-menu-item>
          <el-menu-item index="/producerPage">
          	<i class="el-icon-setting"></i>
          	<span slot="title">出品方&制片方</span>
          </el-menu-item>
				</el-menu>
        <div style="margin-top: 65vh;display: flex;flex-direction: row;margin-left: 70px; ">
        	<el-button @click="back" type="text" size="medium" >返回首页</el-button>
        </div>
			</div>
			<!-- 右边显示栏 -->
			<div style="margin-left: 9vw;margin-top: 3%;">

				  <router-view></router-view>

			</div>
		</div>


	</div>
</template>

<script>
export default {
		data() {
			return {

			}
		},
		methods: {
      back(){
        this.$router.push('/introducePage'); // 页面加载时跳转
      },
		},
	}
</script>

<style>
.notChange {
  position: fixed;
  top: 0px;
  left: 0px;
}
</style>
